
<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4.0/dojo/dojo.xd.js"></script>
    <script type="text/javascript" src="usa-statemap.js"></script>
    
    <script type="text/javascript">
      google.load("visualization", "1", {packages:['table']});
      //      google.load("dojo", "1");
      // Set callback to run when API is loaded
      google.setOnLoadCallback( drawVisualization); 
     
      // Called when the Visualization API is loaded.
      function drawVisualization() {
    
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'State');
        data.addColumn('string', 'Color');
        data.addRows(5);

        data.setCell(0, 0, 'California    ');
        data.setCell(0, 1, 'green');

        data.setCell(1, 0, 'Alaska');
        data.setCell(1, 1, '99CCCC');

        data.setCell(2, 0, 'New York');
        data.setCell(2, 1, 'purple');


        data.setCell(3, 0, 'Kansas');
        data.setCell(3, 1, 'red');


        data.setCell(4, 0, 'Illinois');
        data.setCell(4, 1, 'blue');

        // Add more data rows and cells here

        // Instantiate our table object.
        var vis = new attunet.USAStateMap(document.getElementById('usstatemap_div'));    
        // Draw our table with the data we created locally.
        vis.draw(data, {isDataColor: true});

        var table = new google.visualization.Table(document.getElementById('table_div'));
        table.draw(data, {showRowNumber: false});

      }
        
   </script>
  <title>USA Statemap</title></head>
  <body>
 <P align="center">
  <B> Blue and Red US State Map</B></br>
  </BR>
  Sample Page for USA StateMap Visualization Gadget. This Displays Red and Blue Map based on Input of 0 or 1.
  
  </p>
  <table border="0" cellpadding="3px" cellspacing="3px">
    
      <tr>
      <TH>Data Table</TH>
      <TH> USA State Map</TH>
      </tr>

      <tr>
      <td width="30%" valign="top"> 
        <div id="table_div" style="overflow: auto;">
         </div>
      </td>
      <td width="70%" valign="top""> 
        <div id="usstatemap_div" style="overflow: auto;">
         <img src="http://www.google.com/ig/images/spinner.gif" />
          </div>
      </td>
    </tr>
  </table>


</body>
</html>

